<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>门店管理</el-breadcrumb-item>
      <el-breadcrumb-item>龙湖天街店</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--  ECharts 报表区域 -->
      <div id="main" style="width: 800px;height:400px;"></div>

      <!-- 库存管理区域 -->
      <el-table :data="tableData" style="width: 100%" stripe fit>
        <el-table-column prop="beer" label="通道"></el-table-column>
        <el-table-column prop="currentKeg" label="当前桶">
          <el-progress
            :text-inside="true"
            :stroke-width="24"
            :percentage="percentage"
            status="success"
            :format="format"
          ></el-progress>
        </el-table-column>
        <el-table-column label="库存(桶)">
          <img
            src="../../assets/img/keg.jpg"
            alt=""
            class="keg-img"
            v-for="i in cStockKegs"
            :key="i"
          />
        </el-table-column>
        <el-table-column label="库存(桶)"><div>{{cStockKegs}}</div></el-table-column>
        <el-table-column label="修改库存">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >库存管理</el-button>
        </el-table-column>
        <el-table-column prop="time" label="更新时间"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'ShopDetail',
  data () {
    return {
      percentage: 100,
      stockKegs: 7,
      tableData: [
        {
          beer: '黄啤',
          amount: 0.5,
          time: '2020-09-22 21:03:00'
        }
      ]
    }
  },
  created () {},
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'))
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '啤酒销售'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['原浆', 'HB黑啤', '德式白啤', '哈密瓜小麦', '草莓小麦']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '原浆',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'HB黑啤',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '德式白啤',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '哈密瓜小麦',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: '草莓小麦',
          type: 'line',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          areaStyle: {},
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },
  computed: {
    cStockKegs: function () {
      return this.stockKegs
    }
  },
  methods: {
    format (percentage) {
      return percentage === 100 ? '20L' : `${percentage}%`
    },
    increase () {
      this.stockKegs += 1
    },
    decrease () {
      this.stockKegs -= 1
      if (this.stockKegs < 0) {
        this.stockKegs = 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
.keg-img {
  height: 26px;
  display: inline;
}
</style>
